import React from 'react';
import { View, StyleSheet, Dimensions, Platform, Modal, TouchableOpacity, ScrollView, ActivityIndicator } from 'react-native';
import { ThemedText } from './ThemedText';
import { ThemedView } from './ThemedView';
import { Dish } from '@/types/dish';
import { FontAwesome } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

type Props = {
  isVisible: boolean;
  onClose: () => void;
  likedDishes: Dish[];
  onRemoveDish: (dishId: string) => void;
  onConfirm: () => void;
  isConfirming?: boolean;
};

const CartDrawer = ({ isVisible, onClose, likedDishes, onRemoveDish, onConfirm, isConfirming = false }: Props) => {
  return (
    <Modal
      visible={isVisible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <LinearGradient
            colors={['#fff', '#FFF8F3']}
            style={styles.modalGradient}
          >
            <View style={styles.header}>
              <ThemedText style={styles.title}>想吃清单</ThemedText>
              <TouchableOpacity 
                style={styles.closeButton} 
                onPress={onClose}
                disabled={isConfirming}
              >
                <FontAwesome name="close" size={20} color="#FF9F45" />
              </TouchableOpacity>
            </View>

            <ScrollView 
              style={styles.content}
              showsVerticalScrollIndicator={false}
              bounces={false}
            >
              {likedDishes.length === 0 ? (
                <View style={styles.emptyContainer}>
                  <FontAwesome name="heart-o" size={48} color="#FF9F45" />
                  <ThemedText style={styles.emptyText}>
                    还没有想吃的菜品哦~
                  </ThemedText>
                </View>
              ) : (
                likedDishes.map((dish) => (
                  <View key={dish.id} style={styles.dishItem}>
                    <View style={styles.dishInfo}>
                      <ThemedText style={styles.dishName}>{dish.name}</ThemedText>
                      <View style={styles.rightContent}>
                        {/* <ThemedText style={styles.dishPrice}>¥{dish.price}</ThemedText> */}
                        <TouchableOpacity 
                          style={styles.deleteButton}
                          onPress={() => onRemoveDish(dish.id)}
                          disabled={isConfirming}
                        >
                          <FontAwesome name="trash-o" size={18} color="#FF9F45" />
                        </TouchableOpacity>
                      </View>
                    </View>
                  </View>
                ))
              )}
            </ScrollView>

            <View style={styles.footer}>
              <View style={styles.totalContainer}>
                <FontAwesome name="cutlery" size={20} color="#FF9F45" />
                <ThemedText style={styles.total}>
                  共 {likedDishes.length} 个菜品
                </ThemedText>
              </View>
              <View style={styles.buttonGroup}>
                <TouchableOpacity 
                  style={[styles.button, styles.cancelButton]} 
                  onPress={onClose}
                  disabled={isConfirming}
                >
                  <ThemedText style={styles.buttonText}>取消</ThemedText>
                </TouchableOpacity>
                <TouchableOpacity 
                  style={[
                    styles.button, 
                    styles.confirmButton,
                    { opacity: likedDishes.length > 0 && !isConfirming ? 1 : 0.5 }
                  ]} 
                  onPress={onConfirm}
                  disabled={likedDishes.length === 0 || isConfirming}
                >
                  <LinearGradient
                    colors={['#FF9F45', '#FFC288'] as const}
                    style={styles.confirmGradient}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                  >
                    {isConfirming ? (
                      <ActivityIndicator color="#fff" size="small" />
                    ) : (
                      <ThemedText style={[styles.buttonText, styles.confirmText]}>
                        确认选菜
                      </ThemedText>
                    )}
                  </LinearGradient>
                </TouchableOpacity>
              </View>
            </View>
          </LinearGradient>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  modalContent: {
    width: '90%',
    maxHeight: windowHeight * 0.7,
    backgroundColor: '#fff',
    borderRadius: 16,
    overflow: 'hidden',
    shadowColor: '#FF9F45',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 12,
    elevation: 8,
  },
  modalGradient: {
    minHeight: 200,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255, 159, 69, 0.1)',
    position: 'relative',
  },
  closeButton: {
    position: 'absolute',
    right: 16,
    top: 16,
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: 'rgba(255, 159, 69, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#FF9F45',
  },
  content: {
    maxHeight: windowHeight * 0.4,
  },
  emptyContainer: {
    padding: 32,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 16,
  },
  emptyText: {
    fontSize: 16,
    color: '#FF9F45',
    fontWeight: '500',
  },
  dishItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: 'rgba(255, 159, 69, 0.1)',
  },
  dishInfo: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  rightContent: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16,
  },
  dishName: {
    fontSize: 16,
    color: '#333',
  },
  dishPrice: {
    fontSize: 16,
    color: '#FF9F45',
    fontWeight: 'bold',
  },
  deleteButton: {
    padding: 8,
    borderRadius: 20,
    backgroundColor: 'rgba(255, 159, 69, 0.1)',
  },
  footer: {
    padding: 16,
    borderTopWidth: 1,
    borderTopColor: 'rgba(255, 159, 69, 0.1)',
  },
  totalContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 16,
  },
  total: {
    fontSize: 16,
    color: '#666',
  },
  buttonGroup: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 12,
  },
  button: {
    minWidth: 100,
    height: 40,
    borderRadius: 20,
    overflow: 'hidden',
  },
  cancelButton: {
    backgroundColor: 'rgba(255, 159, 69, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  confirmButton: {
    backgroundColor: '#FF9F45',
  },
  buttonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#FF9F45',
  },
  confirmText: {
    color: '#fff',
  },
  confirmGradient: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default CartDrawer; 